<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html {
        font-size: 20px;
    }
</style>

<body style="font-size: 14px;">
    <!-- 
        vw 视口宽度计算 视口宽度分成100份 2vw => 从宽度分成100份取两份
        vh 视口高度计算 视口高度分成100份 2vh => 从高度分成100份取两份
        rem 相对于html的字体大小
        em 相对于父级的字体大小
        浏览器默认16px = 1em 
    -->

    <div style="font-size: 10px;">
        <div style="font-size: 2em;">test</div>
    </div>

    <!-- 设计稿 1600px 电脑 1280px -->
    <div style="max-width: 1600px;height: 5vh;background: red;"></div>

    <div style="font-size: 2rem;">admin</div>

    <span style="font-size: 2vh;">demo</span>
</body>

</html>